<template>
	<div class="container banxin clearfix" v-cloak>
		<base-topnav :topnav=topnav></base-topnav>
		<base-leftnav @catalog=catalog :leftnav=leftnav></base-leftnav>
		<div class="tab-right">
			<!-- 我的关注 -->
			<div v-if="boxShow==0">
				<div class="top-tab">
					<ul class="clearfix" @click=follow($event) id="my_follow">
						<li style="cursor: pointer;" class="w-hover">关注的院校</li>
						<li style="cursor: pointer;" class="li-conter">关注的专业</li>
						<li style="cursor: pointer;">关注的职业</li>
					</ul>
				</div>
				<div class="follow-substance">
					<ol class="school-ol">
						<transition v-for="site in sites" name=fade>
							<li class="clearfix">
								<div class="school-img">
									<img :src=" logo+site.logo " class="imgs" />
								</div>
								<div class="school-substance">
									<span class="school">{{site.sname}}</span>
									<img src="" alt="" class="image" />
									<span class="city">{{site.dataname}}</span>
									<br />
									<span class="ranking1" v-if='show' v-if='site.stype.length>0' v-for='type of site.stype' v-show=type>{{type}}</span>
									<div class="placing-school">
										<span class="placing">综合排名：<i>{{site.ranking}}</i></span>
										<span class="like">
											<span class="school-attention"
									            v-if='show'
									            :class='site.status==0? "icon-notcollect":"icon-collect"'
									            :follow_id='site.id' @click=delete_follow($event)>
								            </span>
										</span>
									</div>
								</div>
							</li>
						</transition>
					</ol>
					<no-data :no_data="no_data_school"></no-data>
				</div>
				<div class="follow-substance" style="display: none;">
					<transition name=bounce>
						<ol class="major-ol">
							<li v-for="content in contents" class="clearfix">
								<span class="major">{{content.majorname}}</span>
								<span>{{content.mtype}}</span>
								<br />
								<span>所属学科：</span>
								<span class="subject">{{content.dataname}}</span>
								<br />
								<span>毕业5年后薪资约：</span>
								<span class="salary">{{content.five}}</span>
								<div class="placing-major">
									<span class="school-attention" v-if='show' :class='content.status==0? "icon-notcollect":"icon-collect"' :follow_id='content.id' @click=delete_follow($event)>
					            </span>
								</div>
							</li>
						</ol>
					</transition>
					<no-data :no_data="no_data_major"></no-data>
				</div>
				<div class="follow-substance" style="display: none;">
					<transition name=bounce>
						<ol class="occupation-ol">
							<li v-for="major in majors" class="clearfix" v-show=boo>
								<span class="occupation">{{major.job}}</span>
								<br />
								<span>所属行业：</span>
								<span class="subject">{{major.dataname}}</span>
								<div class="placing-occupation">
									<span class="school-attention" v-if='show' :class='major.status==0? "icon-notcollect":"icon-collect"' :follow_id='major.id' @click=delete_follow($event)>
						            </span>
								</div>
							</li>
						</ol>
					</transition>
					<no-data :no_data="no_data_job"></no-data>
				</div>
			</div>
			<!-- 我的志愿表 -->
			<div v-if="boxShow==1">
				<div class="top-table">
					已有2份志愿表
					<span class="append">添加志愿表</span>
				</div>
				<div class="my-table">
					<ul class="my-table-ul">
						<li v-for="voluntary in voluntarys">
							<span class="num">{{voluntary.title}}</span>
							<br />
							<span>备注：{{voluntary.rationality==null?"暂无":voluntary.rationality}}</span>
							<br />
							<span class="time">更新时间：{{voluntary.update_time}}</span>
							<div class="amputate" :voluntary_id='voluntary.id' @click=delete_voluntary($event)>
								<img src="" :voluntary_id='voluntary.id' /> 删除
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 忘记密码 -->
		<div class="revise-box" style="display: none;" id="tip">
			<div class="revise-secondary">
				<div class="return" @click=close($event) id="return">x</div>
				<div class="title">修改密码</div>
				<ul>
					<li>
						<label for="user-name">用户名：
							<input type="text" placeholder="用户名" maxlength="20" name="user-name" id="user-name" class="right-input" v-model="username" />
						</label>
					</li>
					<div>{{ username_prompt }}</div>
					<li>
						<label for="phone">手机号：
							<input type="tel" placeholder="手机号" maxlength="11" name="phone" id="phone" class="right-input" v-model="phone" />
						</label>
					</li>
					<div>{{ phone_prompt }}</div>
					<li>
						<label for="identifying">验证码：
							<span :fgetc='fgetc' id="get-code" @click=get_code($event)>获取验证码</span>
							<input type="tel" placeholder="验证码" maxlength="4" class="identifying" name="identifying" id="identifying" v-model="identifying" />
						</label>
					</li>
					<div>{{ identifying_prompt }}</div>
					<li>
						<label for="passwords">密码：
							<input type="password" placeholder="请设置登录密码 (6-12位)" maxlength="20" name="passwords" id="passwords" class="right-input" v-model="passwords" />
						</label>
					</li>
					<div>{{ passwords_prompt }}</div>
					<li class="button" @click=revise_password($event) id="button">确认修改</li>
				</ul>
			</div>
		</div>
		<base-tips></base-tips>
	</div>
</template>
<script>
	'use strict';
	// base64图片
	// 垃圾桶
	var garbage_can = '';
	module['account'] = {
		template: template,
		components: {
			'base-topnav': require('base-topnav'),
			'base-leftnav': require('base-leftnav'),
			'base-tips':require('base-tips')
		},
		data: function data() {
			return {
				boxShow:0,
				topnav: [{
					name: '首页',
					router: '/index'
				}, {
					name: '我的账户',
					router: '/account'
				}, {
					name: '我的关注',
					router: '/account?index=0'
				}],
				leftnav: {
					title: '我的账户',
					listitem: ['我的关注', '我的志愿表', '修改密码']
				},
				logo: null,
				listItem: null,
				show: true,
				current: '升级VIP',
				editor: editor,
				sites: null,
				contents: null,
				majors: null,
				voluntarys: null,
				boo: true,
				no_data_school: false,
				no_data_major: false,
				no_data_job: false,
				fgetc: true,
				username_prompt: null,
				phone_prompt: null,
				identifying_prompt: null,
				passwords_prompt: null,
				username: "",
				phone: "",
				identifying: "",
				passwords: "",
				status: 1
			};
		},

		methods: {
			catalog: function catalog(e,i) {
				var tar = e.target;
				if(i==2) {
					$('#tip').show();
					return;
				}else if(i==1){
					$('#tips').show();
				}
				var a=['我的关注','我的志愿表','修改密码']
				this.topnav[2].name=a[i];
			},
			mask: function mask() {
				$('#tips').show();
			},
			follow: function follow(e) {
				var tar = e.target;
				if(tar.nodeName == 'LI') {
					if($(tar).hasClass('w-hover')) return;
					$(tar).parents('ul.clearfix').find('.w-hover').removeClass('w-hover');
					$(tar).addClass('w-hover');
					$(".follow-substance").hide();
					$(".follow-substance").eq($(tar).index()).show();
				}
			},

			/* 删除我的志愿表 */
			delete_voluntary: function delete_voluntary(e) {
				var tar = e.target;
				var voluntary_id = $(tar).attr("voluntary_id");
				base.request(base.api(14), {
					wish_id: voluntary_id
				}, function(data) {});
				$(tar).parents("li").remove();
			},

			/* 删除我的关注 */
			delete_follow: function delete_follow(e) {
				var tar = e.target;
				var _this = this;
				var follow_id = $(tar).attr("follow_id");
				this.boo = false;
				var index = $("#my_follow li").filter('.w-hover').index();
				base.request(base.api(31), {
					id: follow_id
				}, function(data) {
					return data;
				}, function(data) {
					if(data.code === 2) {
						if(index == 0) {
							_this.sites.splice($(tar).parents("li").index(), 1);
							_this.no_data_school = _this.sites.length == 0;
						} else if(index == 1) {
							_this.contents.splice($(tar).parents("li").index(), 1);
							_this.no_data_major = _this.contents.length == 0;
						} else if(index == 2) {
							_this.majors.splice($(tar).parents("li").index(), 1);
							_this.no_data_job = _this.majors.length == 0;
						};
					}
				});
			},

			/* 修改密码 */
			revise_password: function revise_password(e) {
				var _this = this;
				var a,
					b,
					c,
					d,
					user = _this.phone,
					user1 = _this.identifying,
					user2 = _this.passwords,
					user3 = _this.username,
					reg = /^1[3|4|5|7|8][0-9]{9}$/,
					pat1 = /^[0-9]{4}$/,
					pat3 = /^[a-zA-Z0-9]{5,20}$/,
					pat2 = /^[a-zA-Z0-9]{6,20}$/,
					res = reg.test(user),
					res1 = pat1.test(user1),
					res2 = pat2.test(user2),
					res3 = pat3.test(user3);
				if(user3 == null || user3 == '') {
					_this.username_prompt = "用户名不能为空";
					return;
				} else if(res3) {
					_this.username_prompt = null;
					d = 1;
				} else {
					_this.username_prompt = "用户名不符合要求";
					return;
				}
				if(user == null || user == '') {
					_this.phone_prompt = "手机号不能为空";
					return;
				} else if(res) {
					_this.phone_prompt = null;
					c = 1;
				} else {
					_this.phone_prompt = "手机号不符合要求";
					return;
				}
				if(user1 == null || user1 == '') {
					_this.identifying_prompt = "验证码不能为空";
					return;
				} else if(res1) {
					_this.identifying_prompt = null;
					b = 1;
				} else {
					_this.identifying_prompt = "验证码不符合要求";
					return;
				}
				if(user2 == null || user2 == '') {
					_this.passwords_prompt = "密码不能为空";
					return;
				} else if(res2) {
					_this.passwords_prompt = null;
					a = 1;
				} else {
					_this.passwords_prompt = "密码不符合要求";
					return;
				}
				if(a == 1 && b == 1 && c == 1 && d == 1) {
					this.check_register(user, user1, user2, user3);
				}
			},

			checkver_test: function checkver_test() {
				var _this = this,
					c,
					user = _this.phone,
					reg = /^1[3|4|5|7|8][0-9]{9}$/,
					res = reg.test(user);
				if(user == null || user == '') {
					_this.phone_prompt = "手机号不能为空";
					return;
				} else if(res) {
					c = 1;
				} else {
					_this.phone_prompt = "手机号不符合要求";
					return;
				}
				if(c == 1) return true;
			},
			check_register: function check_register(phone, code, password, username) {
				base.request(base.api(37), {
					'phone': phone,
					"code": code,
					"password": password,
					"username": username
				}, function(data) {
					alert('修改成功');
					localStorage.clear();
					sessionStorage.clear();
					location.replace("../index.html");
				}, function(data) {
					alert(data.msg);
				});
			},

			/* 模态框 */
			close: function close(e) {
				$('#tip').hide();
				$('#tips').hide();
				$("body").removeClass("fixed");
			},

			/* 获取验证码 */
			get_code: function get_code(e) {
				var _this = this;
				if(_this.checkver_test()) {
					var phone = _this.phone;
					if(phone == "") {
						_this.phone_prompt = "手机号不能为空";
						return;
					}
					if(_this.fgetc) {
						_this.fgetc = false;
						base.request(base.api(38), {
							'phone': phone
						}, function(data) {
							var i = 60;
							$('span#get-code').text(i + 's').css('background-color', "#c2c2c2");
							var time = setInterval(fun, 1000);

							function fun() {
								i--;
								if(i === 0) {
									$('span#get-code').text("获取验证码").css('background-color', "#11bdc5");
									clearInterval(time);
									_this.fgetc = true;
								} else {
									$('span#get-code').text(i + "s").css('background-color', "#c2c2c2");
								}
							}
						}, function a(data) {
							data['code']['0'] === '160040' ? alert('当天短信发送次数超限') : alert(data.msg, "提示", "确定");
						});
					}
				}
			}
		},
		created: function created() {
			var _this2 = this;

			var area = new Promise(function(res, rej) {
					return base.request(base.api(6), {
						group: 'schoolArea'
					}, function(data) {
						return res(data);
					});
				}),
				// 地区
				category = new Promise(function(res, rej) {
					return base.request(base.api(6), {
						group: 'schoolCategory'
					}, function(data) {
						return res(data);
					});
				}),
				// 类型
				condition = new Promise(function(res, rej) {
					return base.request(base.api(52), {}, function(data) {
						return res(data);
					});
				}),
				// 筛选条件
				school = new Promise(function(res, rej) {
					return base.request(base.api(65), {}, function(data) {
						return res(data);
					});
				}),
				// 学院
				listItem = ['我的关注', '我的志愿表', '修改密码'];
			this.tab = ['薪酬最高', '本科比例最高', '女生最多'];
			Promise.all([area, category, condition, school]).then(function(data) {
				_this2.areas = data[0].data.reverse();
				_this2.categorys = data[1].data;
				_this2.conditions = data[2].data;
				_this2.schools = data[3].data;
				_this2.areas.forEach(function(area) {
					if(area.dataname.length > 4) area.dataname = area.dataname.slice(0, 3);
					if(area.dataname.length != 2 && area.dataname !== '内蒙古' && area.dataname !== '黑龙江') area.dataname = area.dataname.slice(0, -1);
				});
			});
			this.listItem = listItem;
			this.logo = base.api('logo');
		},
		activated:function(){
			var _this = this;
			// 我的关注
			console.log(_this);
			base.request(base.api(29), {}, function(data) {
				_this.sites = data.data.school;
				_this.contents = data.data.major;
				_this.majors = data.data.job;
				_this.no_data_school = _this.sites.length == 0;
				_this.no_data_major = _this.contents.length == 0;
				_this.no_data_job = _this.majors.length == 0;
			});
			base.request(base.api(13), {}, function(data) {
				_this.voluntarys = data.data;
			});
		},
		mounted: function mounted() {
			$('#tips-close,.no-download').on('click', function(e) {
				// 模态框
				e.preventDefault();
				$('#tips').hide();
			});
		}
	};
</script>